import './index.scss'
/**
 * 创建新组件之后，在all-can-use-components中添加
 * 必须应用 microCreateMinis
 * 数据必须以formData包含
 * */
import { microCreateMinis } from '../../minis'
import draggable from 'vuedraggable';
import { newGetMicroPageCompotentDetail } from '../../../../../../../api/shoppingMall/feature'
import {groupSelList,pageList} from '@/api/excellentArticle'

/** 头部配置*/
export default {
  name: 'micro-article-ad-box',
  mixins: [microCreateMinis],
  props: {},
  components: {
    draggable,
    articleTag:()=>import('@/components/article_tag') 
  },
  data() {
    return {
      isArticle:true,
      dialogChoose:false,
      dialogChooseGroup:false,
      tabActive: '0',
      tabList: [
        {
          icon: 'el-icon-bank-card',
          title: '样式一'
        },
        {
          icon: 'el-icon-bank-card',
          title: '样式二'
        }
      ],
      formData: {
        indicator:1,
        style:1, // 样式
        isTitle:true, // 文章标题
        isAbstract:true, // 摘要
        isAuthor:true, // 文章作者
        isRead:true, // 阅读数
        isHelp:true, // 点赞数
        isComment:false, // 评论数
        isGroup:true, // 分组标签
        textColor:'#333', // 文字颜色
        bgColor:'#fff', // 背景颜色
        margins:0,// 页边距
        marginTop:0,// 上边距
        marginBottom:0,// 下边距
        waterfall:false, // 瀑布流
        articleSource:{
          articleSource:0, // 文章来源
          maxArticleNum:null, // 文章最大数量 分组列表
          articleIdList:[], // 文章来源方式为0时必传
          groupIdList:[], // 文章来源方式为1时必传
        }
      },
      articleList:[
        {
          imgUrl:require('../../../../../../../assets/micro-page/def.png'),
          title:'这是专题文章标题1',
          contentAbstract:'回合肥发达发达大富黑', // 摘要
          author:'小李1',
          readNum:'11', // 阅读数
          likeNum:'22', // 点赞数
          commentNum:'22', // 评论数
          groupName:'新品' // 分组
        },
        {
          imgUrl:require('../../../../../../../assets/micro-page/def.png'),
          title:'这是专题文章标题2',
          contentAbstract:'回合肥发达发达大富黑', // 摘要
          author:'小李2',
          readNum:'11',
          likeNum:'22',
          commentNum:'22',
          groupName:'热卖'
        },
    ],
    arrList:[],
    groupList:[],
    articleTabs:[],
    arrLists:[],
    commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
    mySelfCheckRules: 'mySelfCheckFun',// 我自己的验证规则函数  比如弹窗之类的
    }
  },
  watch: {
    formData:{
      deep:true,
      handler(val){
        if(val.waterfall){
          if(val.indicator === 2){

          }else{
            this.formData.waterfall = false
          }
        }
        
      }
    },
  },
  computed: {
    theme() {
      return this.$store.getters.theme
    }
  },
  mounted() {
    this.geteCompotentDetail()
  },
  methods: {
    // 分组select
    remoteMethod(){
      groupSelList({name:''}).then(res =>{
        this.groupList = res
      })
    },
    sourceChange(val){
      // if(val == 0){
      //   this.articleList = []
      //   this.formData.articleSource.groupIdList = []
      //   this.articleTabs = []
      // }else{
      //   this.articleList = []
      //   this.formData.articleSource.articleIdList = []
      // }
    },
    geteCompotentDetail(){
      newGetMicroPageCompotentDetail({
        type:'article',
        dataField:this.formData
      }).then(res =>{
        if(res.items.length>0){
          if(this.formData.articleSource.articleSource === 0){
            this.articleList = res.items
          }else{
            this.articleTabs = res.items
            // console.log('分组tabs~~~~~~~~~~~~',res.items)
            this.getGroup(this.articleTabs[0].id)
          }
          
          this.formData = res.dataField
        }
        
      })
    },
    // 分组文章列表
    getGroup(id){
      pageList({
        pageNum: 1,
        pageSize: this.formData.articleSource.maxArticleNum,
        groupId:id
      }).then(res =>{
        this.articleList = res.records
      })
    },
    addArticle(){
      if(this.formData.articleSource.articleSource===0){
        this.dialogChoose = true
        this.isArticle = false
        this.$nextTick(()=>{
          this.isArticle = true
        });
        this.arrLists = this.articleList
      }else{
        this.dialogChooseGroup = true
        this.remoteMethod()
      }
    },
    articleBox(arr){
      this.arrList = arr
    },
    // 文章列表
    confirm(){
      this.formData.articleSource.articleIdList = []
      if(this.articleList.length == this.formData.articleSource.articleIdList.length){
        this.articleList = [...this.articleList,...this.arrList]
        this.arrList.forEach(element => {
          this.formData.articleSource.articleIdList.push(element.id)
        });
      }else{
        let idList = []
        this.arrList.forEach(element => {
          idList.unshift(element.id)
        });
        this.formData.articleSource.articleIdList = idList
        this.articleList = this.arrList
      }
      
      this.dialogChoose = false
      this.geteCompotentDetail()
    },
    // 文章分组
    confirmGroup(){
      this.dialogChooseGroup = false
      this.geteCompotentDetail()
    },
    closeCoupon(i){
      this.$delete(this.formData.articleSource.articleIdList, i)
      this.$delete(this.articleList, i)
    },
    /**
     * 开始验证
     * */
    checkData() {
      this.myCheckResult(true)
    },
    /** 弹窗*/
    mySelfCheckFun() { // 可以选择调用默认规则判断
    }
  }
}
